<template>
  <div class="modal-edit-box">
    <Form :model="messageForm" ref="messageEditForm" :rules="rules" :label-width="120">
      <Row class="code-row-bg">
        <Col span="24" style="border:none;">
          <Form-item :label="$t('module.tenantManage.msgModelName')" prop="name">
            <Input
              :placeholder="$t('module.tenantManage.inputMessageName')"
              :maxlength="64"
              v-model="messageForm.name"
            />
          </Form-item>
        </Col>
      </Row>
      <Row class="code-row-bg">
        <Col span="24" style="border:none;">
          <Form-item :label="$t('module.tenantManage.msgModelCode')" prop="code">
            <Input
              v-if="messageInfo.id"
              :placeholder="$t('module.tenantManage.inputMessageCode')"
              v-model="messageForm.code"
              :maxlength="64"
              disabled
            />
            <Input
              v-else
              :placeholder="$t('module.tenantManage.inputMessageCode')"
              v-model="messageForm.code"
              :maxlength="64"
            />
          </Form-item>
        </Col>
      </Row>
      <Row class="code-row-bg">
        <Col span="24" style="border:none;">
          <Form-item :label="$t('module.tenantManage.messageContent')" prop="content">
            <vue-editor
              v-model="messageForm.content"
              :maxlength="4294967295"
              :editor-toolbar="customToolbar"
              :placeholder="$t('module.tenantManage.inputMessageContent')"
            />
          </Form-item>
        </Col>
      </Row>
    </Form>
  </div>
</template>
<script>
import { VueEditor } from 'vue2-editor'
import { saveMailTpl, saveEditTpl } from '@api/flowable/tenantManage.js'
export default {
  name: 'messageModel',
  props: {
    messageInfo: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  components: {
    VueEditor
  },
  data() {
    return {
      messageForm: {
        name: this.messageInfo.name,
        code: this.messageInfo.code,
        content: this.messageInfo.content
      },
      rules: {
        name: [{ required: true, message: this.$t('module.tenantManage.inputMessageName'), trigger: 'blur' }],
        code: [{ required: true, message: this.$t('module.tenantManage.inputMessageCode'), trigger: 'blur' }],
        content: [{ required: true, message: this.$t('module.tenantManage.inputMessageContent'), trigger: 'blur' }]
      },
      actions: [
        {
          text: this.$t('common.save'),
          theme: 'primary',
          handle: () => {
            this.save()
          },
          loading: false
        },
        {
          text: this.$t('common.close'),
          handle: () => {
            this.$emit('Close')
          }
        }
      ],
      customToolbar: [
        ['bold', 'italic', 'underline'],
        [{ align: '' }, { align: 'center' }, { align: 'right' }],
        [{ list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],
        [{ background: [] }, { color: [] }],
        ['link'],
        [{ header: [false, 1, 2, 3, 4, 5, 6] }],
        ['clean']
      ]
    }
  },
  created() {
    let titleText = this.$t('module.tenantManage.msgText')
    if (this.messageInfo.id) {
      titleText = this.$t('common.edit') + titleText
    } else {
      titleText = this.$t('common.create') + titleText
    }
    this.$emit('SetTitle', titleText)
    this.$emit('SetPageWidth', 700)
    this.$emit('SetPageActions', this.actions)
  },
  methods: {
    _processServiceResponse(res, promputText) {
      this.actions[0].loading = false
      if (res) {
        this.$Message.success({
          content: promputText,
          duration: 3
        })

        //关闭当前窗口
        this.$emit('Close', this.messageForm)
      }
    },
    save() {
      this.$refs['messageEditForm'].validate(valid => {
        if (valid) {
          this.actions[0].loading = true
          let process = this._processServiceResponse.bind(this),
            msgForm = this.messageForm,
            id = this.messageInfo.id
          if (id) {
            msgForm.id = id
            saveEditTpl(msgForm)
              .then(res => process(res, this.$t('common.updateSuccess')))
              .catch(err => (this.actions[0].loading = false))
          } else {
            saveMailTpl(msgForm)
              .then(res => process(res, this.$t('common.createSuccess')))
              .catch(err => (this.actions[0].loading = false))
          }
        }
      })
    }
  }
}
</script>
